<template>
  <div class="setting">
    <van-nav-bar
      title="设置"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <div class="container">
      <div
        class="item"
        @click="$router.push('/setting/userInfo')"
        v-show="isObjectNotEmpty(userInfo)"
      >
        <div class="text">个人信息</div>
        <van-icon name="arrow" />
      </div>
      <van-divider style="margin: 1px 0" />
      <div
        class="item"
        @click="$router.push('/setting/updatePwd')"
        v-show="isObjectNotEmpty(userInfo)"
      >
        <div class="text">修改密码</div>
        <van-icon name="arrow" />
      </div>
      <van-divider style="margin: 1px 0" />
      <div
        class="item"
        @click="$router.push('/setting/feedback')"
        v-show="isObjectNotEmpty(userInfo)"
      >
        <div class="text">反馈中心</div>
        <van-icon name="arrow" />
      </div>
    </div>
    <div class="container">
      <div class="item" @click="$router.push('/setting/version')">
        <div class="text">版本信息</div>
        <van-icon name="arrow" />
      </div>
      <van-divider style="margin: 1px 0" />
      <div class="item" @click="$router.push('/setting/about')">
        <div class="text">关于我们</div>
        <van-icon name="arrow" />
      </div>
      <van-divider style="margin: 1px 0" />
      <div class="item" @click="showShare = true">
        <div class="text">分享软件</div>
        <van-icon name="arrow" />
      </div>
    </div>
    <div class="exit" v-show="isObjectNotEmpty(userInfo)">
      <van-button type="danger" round block @click="logout"
        >退出登录</van-button
      >
    </div>
    <!-- 分享面板 -->
    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
      @select="changeShare"
    />
  </div>
</template>

<script>
import userModule from "@/utils/userInfo";
import { sendMessage } from "@/utils/websocket";
import { Dialog, Toast } from "vant";

export default {
  name: "SettingView",
  data() {
    return {
      userInfo: {},
      showShare: false,
      options: [{ name: "复制链接", icon: "link" }],
    };
  },
  created() {
    this.getUserInfo();
  },
  methods: {
    getUserInfo() {
      const user = userModule.getUser();
      user ? (this.userInfo = user) : (this.userInfo = {});
    },
    // 判断对象是否不为空
    isObjectNotEmpty(obj) {
      return Object.keys(obj).length > 0;
    },
    // 退出登陆
    logout() {
      Dialog.confirm({
        title: "提示",
        message: "确定要退出登录吗？",
      })
        .then(() => {
          sendMessage({
            type: "LOGOUT",
            userId: this.userInfo.id,
          });
          userModule.setUser(null);
          localStorage.removeItem("u_t");
          this.getUserInfo();
        })
        .catch(() => {});
    },
    // 分享选择
    async changeShare({ name, icon }) {
      const url = localStorage.getItem("versionUrl");
      if (name === "复制链接") {
        try {
          if (navigator.clipboard && window.isSecureContext) {
            await navigator.clipboard.writeText(url);
            Toast("复制成功");
          } else {
            const input = document.createElement("input");
            input.value = url;
            document.body.appendChild(input);
            input.select();
            document.execCommand("copy");
            document.body.removeChild(input);
            Toast("复制成功");
          }
          this.showShare = false;
        } catch (err) {
          Toast("复制失败");
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.setting {
  position: relative;
  height: 100vh;
  .container {
    margin: 14px;
    padding: 0 10px;
    background-color: #fff;
    border-radius: 8px;
    .item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 50px;
    }
  }
  .exit {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
  }
}
</style>